<template>
	<div class="dialog">
		<div class="dialog-cover"></div>
		<div class="dialog-container">
			<transition name="slide-fade">
				<div class="dialog-content" v-if="isShow">
					<slot></slot>
				</div>
			</transition>
		</div>
	</div>
</template>

<script>
export default {
  name: 'VDialog',
  props: {
    isTransition: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      isShow: true
    }
  },
  created () {
    if (this.isTransition) {
      this.isShow = false
      setTimeout(() => {
        this.isShow = true
      }, 100)
    }
  }
}
</script>

<style scoped>
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateY(-100%);
  -ms-transform: translateY(-100%);   /* IE 9 */
  -moz-transform: translateY(-100%);  /* Firefox */
  -webkit-transform: translateY(-100%); /* Safari 和 Chrome */
  -o-transform: translateY(-100%);  /* Opera */
  opacity: 0;
}

.slide-fade-enter-active, .slide-fade-leave-active {
	transition: all .5s;
}

.dialog {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1000;
}

.dialog-cover {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.5);
	z-index: 5;
}

.dialog-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%); 	/* IE 9 */
	-moz-transform: translate(-50%, -50%); 	/* Firefox */
	-webkit-transform: translate(-50%, -50%); /* Safari 和 Chrome */
	-o-transform: translate(-50%, -50%); 	/* Opera */
	z-index: 6;
}

.dialog-container:after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	visibility: hidden;
	clear: both;
}

.dialog-content {
	position: relative;
}
</style>
